<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>疫情战争模拟</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 20px;
            background-color: #f4f4f4;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        h1, h2 {
            color: #333;
        }
        .controls {
            margin-bottom: 20px;
            padding: 15px;
            background-color: #f9f9f9;
            border-radius: 5px;
        }
        button {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 10px 15px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
            border-radius: 4px;
        }
        button:hover {
            background-color: #45a049;
        }
        .city-list {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 15px;
            margin-top: 20px;
        }
        .city-card {
            border: 1px solid #ddd;
            border-radius: 5px;
            padding: 15px;
            background-color: #fafafa;
        }
        .city-card h3 {
            margin-top: 0;
            color: #2c3e50;
        }
        .stats {
            font-size: 14px;
        }
        .stat-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 5px;
        }
        .day-counter {
            font-size: 24px;
            font-weight: bold;
            color: #e74c3c;
            margin: 15px 0;
        }
        .log-container {
            margin-top: 20px;
            max-height: 300px;
            overflow-y: auto;
            padding: 10px;
            background-color: #f0f0f0;
            border-radius: 5px;
            font-family: monospace;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>疫情战争模拟</h1>
        
        <div class="controls">
            <div class="day-counter">当前天数: <span id="dayCount">0</span></div>
            <button id="startBtn">开始模拟</button>
            <button id="pauseBtn" disabled>暂停模拟</button>
            <button id="stepBtn" disabled>单步执行</button>
            <button id="resetBtn">重置模拟</button>
        </div>

        <h2>城市状态</h2>
        <div class="city-list" id="cityList"></div>

        <h2>模拟日志</h2>
        <div class="log-container" id="logContainer"></div>
    </div>

    <script type="module">
        // 引入所有游戏模块
        import { Game, game } from './game.js';
        import { City } from './city.js';
        import { Ill } from './ill.js';
        import { LivingMaterial, ProtectiveMaterial, MedicalMaterial } from './material.js';
        
        // 初始化游戏数据
        let currentDay = 0;
        let isRunning = false;
        let simulationInterval = null;
        const logContainer = document.getElementById('logContainer');
        const cityList = document.getElementById('cityList');
        const dayCountEl = document.getElementById('dayCount');
        
        // 日志函数
        function log(message) {
            const logEntry = document.createElement('div');
            logEntry.textContent = `第${currentDay}天: ${message}`;
            logContainer.appendChild(logEntry);
            logContainer.scrollTop = logContainer.scrollHeight;
        }
        
        // 更新城市显示
        function updateCityDisplay() {
            cityList.innerHTML = '';
            
            for (const city of game.allCity) {
                const cityCard = document.createElement('div');
                cityCard.className = 'city-card';
                
                const alive = city.getAlive();
                const totalLifeIncubation = city.lifeBlock.getIncubation();
                const totalHospitalIncubation = city.hospitalBlock.getIncubation();
                const totalLifeInfected = city.lifeBlock.getKnowInfected();
                const totalHospitalInfected = city.hospitalBlock.getKnowInfected();
                const totalIncubation = totalLifeIncubation + totalHospitalIncubation;
                const totalInfected = totalLifeInfected + totalHospitalInfected;
                const totalDeath = city.lifeBlock.getDeath() + city.hospitalBlock.getDeath();
                
                // 获取lifeBlock和hospitalBlock的详细数据
                const lifeDeath = city.lifeBlock.getDeath();
                const lifeUnincubation = city.lifeBlock.getUnincubation();
                const lifeIncubation = city.lifeBlock.getIncubation();
                const lifeKnowInfected = city.lifeBlock.getKnowInfected();
                const hospitalDeath = city.hospitalBlock.getDeath();
                const hospitalUnincubation = city.hospitalBlock.getUnincubation();
                const hospitalIncubation = city.hospitalBlock.getIncubation();
                const hospitalKnowInfected = city.hospitalBlock.getKnowInfected();
                
                cityCard.innerHTML = `
                    <h3>${city.name}</h3>
                    <div class="stats">
                        <div class="stat-row">
                            <span>存活人口:</span>
                            <span>${alive}</span>
                        </div>
                        <div class="stat-row">
                            <span>总潜伏期:</span>
                            <span>${totalIncubation}</span>
                        </div>
                        <div class="stat-row">
                            <span>总已知感染:</span>
                            <span>${totalInfected}</span>
                        </div>
                        <div class="stat-row">
                            <span>总死亡人数:</span>
                            <span>${totalDeath}</span>
                        </div>
                        <div class="stat-row">
                            <span>恐慌度:</span>
                            <span>${city.panic}%</span>
                        </div>
                        
                        <h4 style="margin-top: 10px; margin-bottom: 5px; color: #34495e;">社区数据</h4>
                        <div class="stat-row">
                            <span>社区非潜伏期:</span>
                            <span>${lifeUnincubation}</span>
                        </div>
                        <div class="stat-row">
                            <span>社区潜伏期:</span>
                            <span>${lifeIncubation}</span>
                        </div>
                        <div class="stat-row">
                            <span>社区已知感染:</span>
                            <span>${lifeKnowInfected}</span>
                        </div>
                        <div class="stat-row">
                            <span>社区死亡:</span>
                            <span>${lifeDeath}</span>
                        </div>
                        
                        <h4 style="margin-top: 10px; margin-bottom: 5px; color: #34495e;">医院数据</h4>
                        <div class="stat-row">
                            <span>医院非潜伏期:</span>
                            <span>${hospitalUnincubation}</span>
                        </div>
                        <div class="stat-row">
                            <span>医院潜伏期:</span>
                            <span>${hospitalIncubation}</span>
                        </div>
                        <div class="stat-row">
                            <span>医院已知感染:</span>
                            <span>${hospitalKnowInfected}</span>
                        </div>
                        <div class="stat-row">
                            <span>医院死亡:</span>
                            <span>${hospitalDeath}</span>
                        </div>
                        
                        <h4 style="margin-top: 10px; margin-bottom: 5px; color: #34495e;">物资状态</h4>
                        <div class="stat-row">
                            <span>生活物资:</span>
                            <span>${city.livingMaterial.material}</span>
                        </div>
                        <div class="stat-row">
                            <span>防护物资:</span>
                            <span>${city.protectiveMaterial.material}</span>
                        </div>
                        <div class="stat-row">
                            <span>医疗物资:</span>
                            <span>${city.medicalMaterial.material}</span>
                        </div>
                    </div>
                `;
                
                cityList.appendChild(cityCard);
            }
        }
        
        // 初始化游戏
        function initGame() {
            // 清空现有城市
            game.allCity = [];
            game.transBlock = [];
            
            // 创建3个城市
            const city1 = new City('北京市', '北京', 1, 21832000, 10, 116.4, 39.9);
            const city2 = new City('上海市', '上海', 1, 24802600, 10, 121.5, 31.2);
            const city3 = new City('广东省', '广州', 1, 18978000, 8, 113.2, 23.1);
            
            // 添加到游戏中
            game.allCity.push(city1, city2, city3);
            
            // 计算城市间距离
            game.sortAllCity();
            
            // 第一个城市有初始感染
            city1.lifeBlock.incubation = 100;
            
            currentDay = 0;
            dayCountEl.textContent = currentDay;
            
            log('游戏初始化完成，北京有100名潜伏期感染者');
            updateCityDisplay();
        }
        
        // 执行一天的模拟
        function simulateDay() {
            currentDay++;
            dayCountEl.textContent = currentDay;
            
            log(`开始第${currentDay}天的模拟`);
            
            // 第70天交通阻断
            if (currentDay === 70) {
                log('实施交通阻断措施');
                for (const city of game.allCity) {
                    city.closeTransport = true;
                }
            }
            
            // 更新交通区块
            game.updateTransBlock();
            
            // 更新每个城市
            for (const city of game.allCity) {
                city.update();
                const alive = city.getAlive();
                const total = alive + city.lifeBlock.getDeath() + city.hospitalBlock.getDeath();
                const totalInfected = city.lifeBlock.getIncubation() + city.lifeBlock.getKnowInfected() + city.hospitalBlock.getIncubation() + city.hospitalBlock.getKnowInfected();
                
                if (totalInfected > 0) {
                    log(`${city.name}: 总人口${total}，存活${alive}，感染${totalInfected}`);
                }
            }
            
            // 更新显示
            updateCityDisplay();
            
            // 如果所有城市人口都死光了，停止模拟
            const allDead = game.allCity.every(city => city.getAlive() === 0);
            if (allDead) {
                log('警告：所有城市人口死亡，模拟结束');
                stopSimulation();
            }
        }
        
        // 开始模拟
        function startSimulation() {
            if (isRunning) return;
            
            isRunning = true;
            startBtn.disabled = true;
            pauseBtn.disabled = false;
            stepBtn.disabled = true;
            
            // 每1000毫秒执行一天
            simulationInterval = setInterval(simulateDay, 1000);
        }
        
        // 暂停模拟
        function pauseSimulation() {
            if (!isRunning) return;
            
            clearInterval(simulationInterval);
            isRunning = false;
            startBtn.disabled = false;
            pauseBtn.disabled = true;
            stepBtn.disabled = false;
        }
        
        // 停止模拟
        function stopSimulation() {
            clearInterval(simulationInterval);
            isRunning = false;
            startBtn.disabled = false;
            pauseBtn.disabled = true;
            stepBtn.disabled = false;
        }
        
        // 单步执行
        function stepSimulation() {
            if (isRunning) return;
            simulateDay();
        }
        
        // 重置游戏
        function resetSimulation() {
            stopSimulation();
            logContainer.innerHTML = '';
            initGame();
        }
        
        // 绑定按钮事件
        const startBtn = document.getElementById('startBtn');
        const pauseBtn = document.getElementById('pauseBtn');
        const stepBtn = document.getElementById('stepBtn');
        const resetBtn = document.getElementById('resetBtn');
        
        startBtn.addEventListener('click', startSimulation);
        pauseBtn.addEventListener('click', pauseSimulation);
        stepBtn.addEventListener('click', stepSimulation);
        resetBtn.addEventListener('click', resetSimulation);
        
        // 初始化游戏
        initGame();
    </script>
</body>
</html>